// useContext的作用仅仅是用来替代Consumer的
// 只是用来接收的
import React, { createContext, useContext } from "react";

const context = createContext();
const context2 = createContext();

const Child2 = () => {
  // 里面要接收一个参数，参数是context对象
  // 返回的是对应的Provider的value对象

  // 不仅仅是简化了代码，还减少了组件层级
  const { name } = useContext(context);
  const { nickname } = useContext(context2);

  return (
    <div>
      child2子组件 - {name} - {nickname}
    </div>

    // <div>
    //   child2子组件 -{" "}
    //   <context.Consumer>
    //     {(value) => <span>{value.count}</span>}
    //   </context.Consumer>{" "}
    //   -
    //   <context2.Consumer>
    //     {(value) => <span>{value.nickname}</span>}
    //   </context2.Consumer>
    // </div>
  );
};

const Child = () => {
  return (
    <context2.Provider value={{ nickname: "xiaosan" }}>
      <div>child子组件</div>
      <Child2 />
    </context2.Provider>
  );
};

const App = () => {
  return (
    <context.Provider
      value={{
        count: 10,
        name: "zhangsan",
      }}
    >
      <h2>useContext</h2>
      <Child />
    </context.Provider>
  );
};

export default App;
